<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getDayWarmth } from '@/utils'
import { useUserStore } from '@/stores/user'
import { getUserDetail, updateDetails } from '@/api/user'
import { userAvatarMap } from './userAvatar'
import AvatarDialog from './user-components/avatar-dialog.vue'
import UserUpdateDialog from './user-components/user-update-dialog.vue'
import type { Users } from '@/api/interface'

const userStore = useUserStore()
// 获取每日金句
const dayWarmth = ref()
dayWarmth.value = getDayWarmth()

const initUserDetails = () => {
  if (userStore.userId) {
    queryDetails(userStore.userId)
  }
}

// 获取用户详情信息
const userInfo = reactive<Partial<Users.User>>({})
const queryDetails = async (id: number) => {
  const result = await getUserDetail({ id })
  userStore.updateUserInfo(result)
  Object.assign(userInfo, result)
  avatarSelected.value = result.avatar
  // console.log('🌈 —— data-userInfo --->', userInfo)
}
initUserDetails()

// 获取用户主页 Actions 列表
const userConfigs = ref([
  {
    id: 1,
    title: '个人信息设置',
    key: 'infoSetting',
  },
  {
    id: 2,
    title: '网页设置',
    key: 'webSetting',
  },
])

// 对话框
const updateDialog = ref(false)
const avatarDialog = ref(false)
const avatarSelected = ref<string>('')
const handleMenu = (conf: any) => {
  switch (conf.key) {
    case 'infoSetting':
      infoSettingHandler()
      break
    default:
      ElMessage({
        type: 'warning',
        message: '暂不支持该操作',
      })
      break
  }
}

const updateCloseProcessor = () => {
  updateDialog.value = false
}

const updateConfirmProcessor = async (userInfo: any) => {
  await updateDetails(userInfo)
  ElMessage({
    type: 'success',
    message: '修改成功',
  })
  updateCloseProcessor()
  // 重新获取用户信息
  initUserDetails()
}

const updateOpenAvatar = (avatar: string) => {
  avatarSelected.value = avatar
  updateDialog.value = false
  avatarDialog.value = true
}

const avatarCloseProcessor = () => {
  avatarDialog.value = false
  updateDialog.value = true
}

const avatarConfirmProcessor = (avatar: string) => {
  avatarSelected.value = avatar
  avatarCloseProcessor()
}

// 用户框-信息设置(固定)
const infoSettingHandler = () => {
  updateDialog.value = true
}
// 用户框-网页设置(固定)
</script>

<template>
  <div class="home-user-container">
    <div class="user-container">
      <div class="avatar">
        <ElAvatar
          :src="userAvatarMap[(userInfo?.avatar || '1') as '1']"
          :size="70"
          fit="cover"
        ></ElAvatar>
      </div>
      <div class="user-info-chuck">
        <div class="user-chuck">
          <div class="label">昵称</div>
          <div class="value">{{ userInfo?.nickName }}</div>
        </div>
        <div class="user-chuck">
          <div class="label">签名</div>
          <div class="value">{{ userInfo?.signature }}</div>
        </div>
      </div>
    </div>
    <div class="home-exits-info">
      <div class="header-container">
        <div class="clock-container">
          <div class="text-container c-one-hidden">
            {{ dayWarmth.text }}
          </div>
        </div>
      </div>
      <div class="menu-container">
        <div
          class="menu-item"
          v-for="item in userConfigs"
          :key="item.id"
          @click="handleMenu(item)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>

  <UserUpdateDialog
    :open="updateDialog"
    :user-info="userInfo"
    :avatar="avatarSelected"
    @close-processor="updateCloseProcessor"
    @confirm-processor="updateConfirmProcessor"
    @open-avatar-dialog="updateOpenAvatar"
  />

  <AvatarDialog
    :open="avatarDialog"
    :avatar="avatarSelected"
    @close-processor="avatarCloseProcessor"
    @confirm-processor="avatarConfirmProcessor"
  />
</template>

<style scoped lang="scss">
@use './user.scss';
</style>
